<template>
	<div class="page">
		
		<div class="page-top" :style="{ paddingTop: statusBarHeight + 'px' }">
			<div class="top">
				<div class="top-icon" @click="onBack()">
					<van-icon name="arrow-left" color="#141414" size="18" />
				</div>
				<div class="top-right">
					<div class="top-input">
						<van-icon class="input-icon" name="search" size="15" />
						<van-field class="top-input" v-model="txt" placeholder="请入需要搜索的内容" :clearable="true" />
					</div>
					<van-button class="top-btn" @click="onSearch">搜索</van-button>
				</div>
			</div>
			<div class="title" v-if="!isShow">
				<div class="title-txt">搜索历史</div>
				<div v-if="txtArr.length != 0" class="title-icon" @click="onDel">
					<van-icon name="delete-o" color="#9C9C9C" size="15" />
				</div>
			</div>

			<div class="content" v-if="!isShow">
				<div class="content-item" v-for="(item, index) in txtArr" :key="index" @click="onChoose(item)">{{ item }}</div>
			</div>
		</div>

		<div class="result" v-if="isShow">
			<div class="dish-item" v-for="(item,index) in good_list" :key="index" @click="goDish(item)">
				<div class="dish-tip" :class="{'tip-down': item.status == 0}">{{ `${item.status == 0 ? '下架中' : '上架中'}` }}</div>
				<img class="dish-img" :src="item.pics"  />
				<div class="dish-right">
					<div class="dish-txt">
						<span class="txt-icon">{{ item.unit }}</span>
						<span>{{ item.name }}</span>
					</div>
					<div class="dish-flex">
						<div class="dish-price">
							<span class="price-sym">¥</span>
							<span>{{ item.price_arr.z_price }}</span>
							<span class="price-icon">.{{ item.price_arr.x_price }}</span>
						</div>
						<div class="dish-icon" @click.stop="()=>{}">
							<van-button v-if="item.status == 1" class="refund-btn" @click="onDownGood(item, index)">下架</van-button>
                            <van-button v-if="item.status == 0" class="refund-btn" @click="onUpGood(item, index)">上架</van-button>
							<van-button class="price-btn" @click="priceChange(item, index)">改价</van-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="no-data" v-if="isShow && good_list.length == 0">
			<img class="no-img" src="https://files.onestep6.com/cloud/cart-no.png"  />
			<div class="no-txt">暂无数据～</div>
		</div>
		<popup-choose ref="popupDel" txt="是否确认删除所有搜索历史？" right_txt="删除" @right="onRight" />
		<popup-choose ref="popupChoose" txt="是否确认下架该商品，下架后，将不对平台商品进行展示" @right="onDownRight" />
        <popup-choose ref="popupUp" txt="是否确认上架该商品，上架后，商铺可正常查看与下单" @right="onUpRight" />

		<popup-price ref="popupPrice" @right="onPrice" />

	</div>
</template>

<script>
	import { goodList, upGoods, changePrice } from "@/api/cloud";
	import { mapState } from "vuex";
	import popupChoose from "@/components/popupChoose.vue";
	import popupPrice from "@/components/popupPrice.vue";
	export default {
		components: {
			popupChoose,
			popupPrice
		},
		computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				statusBarHeight: 0,
				txt: '',
				txtArr: [],
				isShow: false,
				show: false,
				good_list: [],
				down_good_id: '',
				down_index: '',
				up_good_id: '',
				up_index: '',
				price_id: '',
				price_index: ''
			}
		},
		created() {
			let arr = JSON.parse(localStorage.getItem('txtArr') || `[]`);
			console.log(arr)
			if (arr) {
				this.txtArr = arr;
			} else {
				this.txtArr = [];
			}
			console.log(this.txtArr)
		},
		onShow() {
			// 同步可能添加或者删除物品的信息
			if (this.txt) {
				this.search();
			}
		},
		onShareAppMessage() {
			return {
				title: '欢迎使用云上到家',
				path: '/pages/index/index'
			};
		},
		methods: {
			onBack() {
				this.$router.back()
			},
			clearIcon() {
				this.txt = '';
				this.isShow = false;
			},
			onSearch() {
				if ( this.txt == '') {
					return false;
				}
				let that = this;
				let isStop = false;
				that.txtArr.map((item)=>{
					if (item == that.txt) {
						isStop = true;
					}
				})
				if (!isStop)  {
					that.txtArr.push(this.txt);
					localStorage.setItem('txtArr', JSON.stringify(that.txtArr))
				}
				this.search();
			},
			async search () {
				const res = await goodList({
					page_no: 1,
					page_size: 30,
					keys: this.txt
				});
				if (res.status == 1) {
					this.isShow = true;
					this.good_list = res.data.list;
				}
			},
			onDel() {
				this.$refs.popupDel.show();
			},
			// 弹窗回调
			onRight() {
				this.txtArr = [];
				localStorage.setItem('txtArr',  [])
			},
			onChoose(item) {
				this.txt = item;
				this.search();
			},
			onDownGood(item, index) {
				this.down_good_id = item.id;
				this.down_index = index;
				this.$refs.popupChoose.show();
			},
			// 确认下架商品
			async onDownRight() {
				const res = await upGoods({
					id: this.down_good_id,
					status: 0
				})
				if (res.status == 1) {
					this.$set(this.good_list[this.down_index], 'status', 0)
					this.$toast('下架成功')
				}
			},
			onUpGood(item, index) {
				this.up_good_id = item.id;
				this.up_index = index;
				this.$refs.popupUp.show();
			},
			async onUpRight() {
				const res = await upGoods({
					id: this.up_good_id,
					status: 1
				})
				if (res.status == 1) {
					this.$set(this.good_list[this.up_index], 'status', 1)
					this.$toast('上架成功')
				}
			},
			goDish(item) {
				this.$router.push({
					path: '/goodDetail',
					query: {
						id: item.id
					}
				})
			},
			priceChange(item, index) {
				this.price_id = item.id;
				this.price_index = index;
				this.$refs.popupPrice.show({
					base_price:item.base_price, 
					price: item.price
				});
			},
			// 确认改价
			async onPrice(data) {
				console.log(data)
				const res = await changePrice({
					id: this.price_id,
					...data
				})
				if (res.status == 1) {
					let arr = String(data.base_price).split('.');
					this.$set(this.good_list[this.price_index], 'price_arr', { z_price: arr[0], x_price: arr[1]})
					this.$toast.success('改价成功')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.page{
	width: 100%;
	height: 100vh;
	background: #FFFFFF;
}
.page-top{
	background: #FFFFFF;
	padding-bottom: 24px;
}
.top{
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	overflow: hidden;
}
.top-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 68px;
	height: 80px;
}
.top-right{
	display: flex;
	align-items: center;
	width: 548px;
	height: 64px;
	background: #FFFFFF;
	border: 2px solid #49CA6F;
	border-radius: 35px;
}
.top-input{
	flex: 1;
	display: flex;
	align-items: center;
	height: 60px;
	font-size: 28px;
	padding-left: 0;
	.input-icon{
		flex-shrink: 0;
		margin: 0 15px;
	}
	::v-deep .input-placeholder{
		width: 100%;
		font-size: 25px !important;
	}
}
.top-btn{
	width: 100px;
	height: 52px;
	padding: 0;
	font-size: 28px;
	line-height: 52px;
	font-weight: bold;
	color: #FFFFFF;
	background: #49CA6F;
	border-radius: 29px;
	border:none;
	margin-right: 4px;
}
.top-btn::after{
	border:none;
}

.title{
	display: flex;
	justify-content: space-between;
	padding-left: 24px;
	padding-top: 48px;
	padding-bottom: 32px;
	.title-txt{
		font-size: 30px;
		line-height: 28px;
		color: #141414;
		font-weight: bold;
	}
	.title-icon{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 84px;
		height: 30px;
	}
}

.content{
	display: flex;
	flex-wrap: wrap;
	padding-left: 24px;
	padding-right: 30px;
	.content-item{
		width: fit-content;
		padding: 0 24px;
		background: #F7F7F7;
		font-size: 24px;
		line-height: 56px;
		border-radius: 27px;
		color: #333333;
		margin-right: 24px;
	}
}

.no-data{
	padding-top: 82px;
	.no-img{
		display: block;
		width: 222px;
		height: 222px;
		margin: 0 auto 20px;
	}
	.no-txt{
		font-size: 28px;
		line-height: 44px;
		color: #798391;
		text-align: center;
	}
}

.result{

	.dish-item{
		position: relative;
		// width: 340px;
		display: flex;
		width: 100%;
		margin-left: 22px;
		padding-right: 34px;
		background: #FFFFFF;
		margin-bottom: 18px;
		border-radius: 16px;
	}
	.dish-tip{
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 10px;
        width: fit-content;
        height: 28px;
        font-size: 20px;
        line-height: 28px;
        color: #FFFFFF;
        background: #49CA6F;
        border-radius: 10px 0px 10px 0px;
    }
    .tip-down{
        background: #798391;
    }
	.dish-right{
		flex: 1;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30px;
	}
	.dish-img{
		flex-shrink: 0;
		display: block;
		width: 158px;
		height: 158px;
		border-radius: 4px;
		border-radius: 16px;
	}
	.dish-txt{
		width: 332px;
		font-size: 28px;
		line-height: 40px;
		color: #000000;
		font-weight: bold;
		.txt-icon{
			width: fit-content;
			padding: 0 6px;
			margin-right: 6px;
			font-size: 22px;
			line-height: 40px;
			margin-bottom: 2px;
			color: #FFFFFF;
			background: #49CA6F;
			border-radius: 4px;
		}
	}
	.dish-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dish-price{
			font-size: 48px;
			line-height: 40px;
			color: #FF4D4F;
			font-weight: bold;
			.price-sym{
				font-size: 28px;
			}
			.price-icon{
				font-size: 30px;
			}
		}
		.dish-icon{
			display: flex;
			align-items: center;
			.price-btn{
				flex-shrink: 0;
				display: block;
				width: 128px;
				height: 56px;
				background: #49CA6F;
				border-radius: 39px;
				font-size: 24px;
				line-height: 56px;
				color: #FFFFFF;
				font-weight: 500;
				border:none;
				margin-left: 14px;
			}
			.price-btn::after{
				border:none;
			}
			.refund-btn{
				width: 128px;
				height: 56px;
				border: 2px solid #49CA6F;
				font-size: 24px;
				line-height: 52px;
				color: #49CA6F;
				font-weight: 500;
				border-radius: 39px;
				background: #FFFFFF;
				margin-left: 24px;
			}
		}
	}
}
</style>
